<template>
	<view class="index">
		<u-navbar :is-back="false">
			<view class="search-wrap">
				<image :src="home_icon" mode="aspectFill"></image>
				<u-search v-model="search" height="62" :show-action="false" :action-style="{color: '#fff'}" @search="searchEvent"></u-search>
			</view>
		</u-navbar>
		<!-- <view class="search d_flex">
			<u-icon name="search" color="#919191"></u-icon>
			<input v-model="search" type="text" confirm-type="search" placeholder="搜索词" @confirm="searchEvent" class="text"></input>
		</view> -->
		
		<view class="swiper">
			<u-swiper :list="swiperList" name="cover" mode="number" indicator-pos="bottomRight" height="270rpx" @click="swiperClick"></u-swiper>
		</view>
		
		<view class="tabsBox" v-if="col>0 && tabList.length > 0">
			<scroll-view class="tabs" id="tabs" :scroll-x="true" @scroll="scrollEvent">
				<view class="tabBox" v-for="(item , index) in tabList" :key="index">
					<view class="item" :style="{ width: width }" v-for="(itm , idx) in item" :key="idx" @click="goUrl(itm.url, itm.title)">
						<image class="image" :src="itm.cover" mode="aspectFill"></image>
						<view class="text">{{itm.title}}</view>
					</view>
				</view>
			</scroll-view>
			<!-- <view class="tab-bar" v-if="tabList.length>1">
				<view class="item" :style="{ width: tabBarItemWidth + 'rpx', transform: `translate(${tabBarItemLeft}rpx, 0)` }"></view>
			</view> -->
		</view>
		
		<view class="recommendBox">
			
			<block v-for="(item,index) in goods_active_list" :key="index">
				
				<view class="recommend" :style="{background: item.bg_color}" v-if="item.show_type == '10'">
					<view class="title" @click="goActivity(index)">
						<image class="image" :src="item.title_img" mode="widthFix" v-if="item.title_img != ''"></image>
					</view>
					<scroll-view class="recommendList" :scroll-x="true" >
						<view class="item" v-for="(itm, idx) in item.goods_list" :key="idx" @click="goDetails(itm.goods_id)">
							<view class="imageBox">
								<image :src="itm.goods_main_img" mode="aspectFill"></image>
								<!-- <view class="rect"></view>
								<view class="desc">热拍</view> -->
								<view class="maskBox" v-if="itm.is_score_goods == '10'">最高补贴:<text>￥{{itm.max_income}}</text></view>
								<view class="maskBox" v-else>积分到手:<text>￥{{numFilter(itm.sales_price - itm.score_use)}}</text></view>
								<view class="mask flex_conter_c" v-if="itm.store_num < 1">
									<image class="soldOut" src="/static/soldOut.png" mode="widthFix"></image>
								</view> 
							</view>
							<view class="titleBox u-line-2">{{itm.goods_title}}</view>
							<view class="price">￥{{itm.sales_price}} <text class="original">￥{{itm.original_price}}</text></view>
						</view>
					</scroll-view>
				</view>
				
				<view class="recommend" :style="{background: item.bg_color}" v-if="item.show_type == '20'">
					<view class="title" @click="goActivity(index)">
						<image class="image" :src="item.title_img" mode="widthFix" v-if="item.title_img != ''"></image>
					</view>
					<view class="goodsList goodsList2">
						<view class="item flex_space_b" v-for="(itm, idx) in item.goods_list" :key="idx" @click="goDetails(itm.goods_id)">
							<view class="imageBox">
								<u-image width="200rpx" height="200rpx" border-radius="12" :src="itm.goods_main_img"></u-image>
								<view class="mask flex_conter_c"  v-if="itm.store_num < 1">
									<image class="soldOut" src="/static/soldOut.png" mode="widthFix"></image>
								</view>
							</view>
							<view class="info flex_conter_c">
								<view class="flex1 goodsInfoBox">
									<view class="titleBox u-line-2">{{itm.goods_title}}</view>
									<view class="data">
										<view class="flex">
											<view class="price">￥<text>{{itm.sales_price}}</text></view>
											<view class="original">￥{{itm.original_price}}</view>
										</view>
										
										<view class="bottoBox" v-if="itm.is_score_goods == '10'">
											<view class="group">{{itm.sub_team_count}}人团</view>
											<view class="subsidy">最高补贴:<text>￥{{itm.max_income}}</text></view>
										</view>
										<view class="bottoBox" v-else>
											<view class="subsidy2">
												<!-- 积分抵扣:<text>{{item.discounts_rate}}</text>
												<text class="line">+</text> 
												<text>￥{{numFilter(item.sales_price-item.score_use)}}</text>到手 -->
												<view>积分抵扣到手价:<text class="text">￥{{numFilter(itm.sales_price - itm.score_use)}}</text></view>
											</view>
										</view>
										<view class="car flex_conter_c">
											<u-icon name="gouwuche" custom-prefix="custom-icon" size="28" color="#fe0000"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="recommend" :style="{background: item.bg_color}" v-if="item.show_type == '30'">
					<view class="title" @click="goActivity(index)">
						<image class="image" :src="item.title_img" mode="widthFix" v-if="item.title_img != ''"></image>
					</view>
					<view class="waterfall">
						<view class="item" v-for="(itm, idx) in item.goods_list" :key="idx" @click="goDetails(itm.goods_id)">
							<view class="imageBox">
								<u-image width="313rpx" height="313rpx" :src="itm.goods_main_img"></u-image>
								<view class="mask flex_conter_c" v-if="itm.store_num < 1">
									<image class="soldOut" src="/static/soldOut.png" mode="widthFix"></image>
								</view>
							</view>
							<view class="info flex_end_b">
								<view class="subsidy" v-if="itm.is_score_goods == '10'">
									<view>最高补贴</view>
									<view>￥{{itm.max_income}}</view>
								</view>
								<view class="subsidy" v-else>
									<view>积分到手</view>
									<view>￥{{numFilter(itm.sales_price - itm.score_use)}}</view>
								</view>
								<view class="group">
									<text class="text" v-if="itm.is_score_goods == '10'">{{itm.sub_team_count}}人团</text>
									<text class="text" v-else>&nbsp;</text>
									<text class="surplus">仅剩{{itm.store_num}}个</text>
								</view>
							</view>
							<view class="bottoBox">
								<view class="titleBox u-line-2">{{itm.goods_title}}</view>
								<view class="priceBox">
									<view class="price">￥<text>{{itm.sales_price}}</text></view>
									<view class="original">￥{{itm.original_price}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</block>
			
		</view>
		
		
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="ad mTop2 flex_space_b">
			<image style="width: 330rpx;" mode="widthFix" :src="shop_rule" @click="shopRule" v-if="shop_rule"></image>
			<image style="width: 330rpx;" @click="rank" mode="widthFix" :src="score_lotto" v-if="score_lotto"></image>
		</view>
		<!-- #endif -->
		
		<view>
			<image style="width: 686rpx;" mode="widthFix" :src="goods_show_title" v-if="goods_show_title"></image>
			
			<view class="goodsList">
				<view class="item flex_space_b" v-for="(item, index) in goods_list" :key="index" @click="goDetails(item.goods_id)">
					<view class="imageBox">
						<u-image width="200rpx" height="200rpx" border-radius="12" :src="item.goods_main_img"></u-image>
						<view class="mask flex_conter_c" v-if="item.store_num < 1">
							<image class="soldOut" src="/static/soldOut.png" mode="widthFix"></image>
						</view>
						<!-- <view class="rect"></view>
						<view class="desc">热拍</view> -->
					</view>
					<view class="info flex_conter_c">
						<view class="flex1 goodsInfoBox">
							<view class="title u-line-2">{{item.goods_title}}</view>
							<view class="data">
								<view class="flex">
									<view class="price">￥<text>{{item.sales_price}}</text></view>
									<view class="original">￥{{item.original_price}}</view>
									<!-- <view class="group">差2人成团</view> -->
								</view>
								<!-- <view class="ratio">
									<text>最高补贴：{{item.max_income}}元</text>
								</view> -->
								<view class="bottoBox" v-if="item.is_score_goods == '10'">
									<!-- <text>拼中率:{{item.award_rate}}%，差{{item.limit_user_count}}人成团</text> -->
									<view class="group">{{item.sub_team_count}}人团</view>
									<view class="subsidy">最高补贴:<text>￥{{item.max_income}}</text></view>
								</view>
								<view class="bottoBox" v-else>
									<!-- <view class="surplus">库存<text>5</text>个</view> -->
									<view class="subsidy">
										<!-- 积分抵扣:<text>{{item.discounts_rate}}</text>
										<text class="line">+</text> 
										<text>￥{{numFilter(item.sales_price-item.score_use)}}</text>到手 -->
										<view>积分抵扣到手价:<text class="text">￥{{numFilter(item.sales_price - item.score_use)}}</text></view>
									</view>
								</view>
								<view class="car flex_conter_c">
									<u-icon name="gouwuche" custom-prefix="custom-icon" size="28" color="#fe0000"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 更新内容 -->
		<view class="popupBox" @touchmove.stop.prevent="nullFuntion" v-if="isUpdate">
			<view class="shadeBg"></view>
			<view class="popCon">
				<image class="updateTip" src="../../static/update/updateTip.png" mode="widthFix"></image>
				<view class="updateTit">更新内容</view>
				<scroll-view scroll-y="true" class="updateCon" >
					<view style="white-space: pre-wrap;">{{updateRemark}}</view>
				</scroll-view>
				<view class="btnBox flex" v-if="!isMakeSure">
					<view class="sub cancel" @tap="cancelUpdate">稍后更新</view>
					<view class="sub confirm" @tap="subForm">马上更新</view>
				</view>
				<view class="knowBtn" v-if="isMakeSure" @tap="subForm">立即更新</view>
			</view>
		</view>
		
		<!--  更新进度  -->
		<view class="progressBox" v-if="downloadover">
		   <view class="proInner">
			   <view>{{downloadover}}</view>
		   </view>
		</view>
		
		<u-mask :show="checkedInShow" @click="checkedInShow = false" :zoom="false">
			<view class="checkedInPopup">
				<image class="image" src="../../static/popupImage.png" mode="aspectFill"></image>
				<view class="title">新用户登陆</view>
				<view class="reward">获得200积分</view>
				<button class="btn" type="default" @click="checkedInShow = false">好的</button>
			</view>
		</u-mask>
		
		<u-mask :show="announcementShow" @click="announcementShow = false" :zoom="false">
			<view class="announcementShowPopup">
				<image class="image" src="/static/announcement.png" mode="aspectFill"></image>
				<view class="content">
					<view class="title">{{pop_notice.title}}</view>
					<view class="text u-line-3">{{pop_notice.jianjie}}</view>
				</view>
				<view class="buttonBox">
					<button class="btn" type="default" @click.stop="announcementEvent">查看详情</button>
				</view>
			</view>
		</u-mask>
		
		<!-- #ifdef MP-WEIXIN -->
		<!-- <official-account @load='bindSuccess' @error='bindError'></official-account> -->
		<!-- #endif -->
		
		<!-- <view class="app" v-if="true">
			<view class="logo">
				<image class="image" src="/static/logo2.png" mode="aspectFill"></image>
			</view>
			<view class="text">打开App</view>
		</view>
		<view class="app" v-else>
			<view class="logo">
				<image class="image" src="/static/logo2.png" mode="aspectFill"></image>
			</view>
			<view class="text">下载App</view>
		</view> -->
	</view>
	
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				swiperList: [],
				goods_list:[],
				search: '',
				shop_rule:"",
				score_lotto:"",
				goods_show_title:"",
				uid:0,
				
				isUpdate: false,
				isMakeSure: true,
				updateRemark: "",
				wgtUrl:null,
				fileName:null,
				downloadover: '',
				
				checkedInShow: false,
				announcementShow: false,
				pop_notice:{},
				pop_id:'',
				
				goods_active_list:[],
				
				// tabs列数
				col: 0,
				scrollLeft: 0,
				scrollWidth: 0,
				tabList: [],
				home_icon:"/static/logo2.png",
				color: '#f8f8f8'
			}
		},
		onLoad() {
			this.loadData(true);
			setInterval(this.loadData,5000);
			uni.setNavigationBarTitle({
				title:uni.getStorageSync('xixuan_plat_name')
			});
		},
		onPullDownRefresh:function(){// 下拉刷新
			this.loadData(false);
		},
		onShareAppMessage() {
			return {
			  title:"拼中省钱，拼不中赚钱！！！",
			  path:'/pages/index/index?uuid='+this.uid
			}
		},
		onShareTimeline() {
			return {
			  title:"拼中省钱，拼不中赚钱！！！",
			  query:'uuid='+this.uid
			}
		},
		methods: {
			loadData: function(is_loading){
				
				if(is_loading == undefined){
					is_loading = false;
				}
				// 加载数据
				var that = this;
				util.requestPost("api.php/home/index", {}, function(res) {
					that.swiperList = res.data.swiper_list;
					that.goods_list = res.data.goods_list;
					that.shop_rule = res.data.shop_rule;
					that.score_lotto = res.data.score_lotto;
					that.goods_show_title = res.data.goods_show_title;
					that.uid = res.data.uid;
					that.goods_active_list = res.data.goods_active_list;
					
					that.col = res.data.home_nav_cols;
					that.tabList = res.data.nav_list;
					
					that.home_icon = res.data.home_icon;
					
					that.pop_notice = res.data.pop_notice;
					if(that.pop_notice && that.pop_notice.id && that.pop_id != that.pop_notice.id){
						that.pop_id = that.pop_notice.id;
						that.announcementShow = true;
					}
					
					// #ifdef APP-PLUS
						that.checkVersion();
					// #endif
					
					// #ifdef APP-PLUS || H5
						if(!that.shop_rule){
							that.shop_rule = "http://xcx.tfxiaochengxu.com/2020-11-16_5fb24a9947627.png";
						}
						if(!that.score_lotto){
							that.score_lotto = "http://xcx.tfxiaochengxu.com/2020-11-16_5fb24ae2d1cb0.png";
						}
					// #endif
				},is_loading);
			},
			swiperClick(e){
				let url = this.swiperList[e].url;
				if(url){
					if(url.indexOf("http") == 0){
						uni.navigateTo({
							url:"../openUrl/openUrl?openUrl="+url
						});
					}else{
						uni.navigateTo({
							url:url
						});
					}
				}
			},
			bindSuccess(e){
				console.log("加载成功...")
				console.log(e)
			},
			bindError(e){
				console.log("加载失败...")
				console.log(e)
			},
			goDetails(goods_id) {
				// 商品详情
				let that = this;
				uni.navigateTo({
					url: '/pages/index/goodsDetails?goods_id='+goods_id
				})
			},
			shopRule () {
				// 规则
				uni.navigateTo({
					url: '/pages/index/shopRule'
				})
			},
			rank () {
				// 排行榜
				uni.navigateTo({
					url: '/pagesB/index/rank'
				})
			},
			searchEvent () {
				// 搜索
				uni.navigateTo({
					url: '/pages/index/search?search='+this.search
				})
			},
			show_toast(){
				// 弹出提示
				util.toast("即将开放！");
			},
			nullFuntion:function(){
				
			},
			checkVersion: function(){// 检查版本更新
				var that = this;
				const data = {
					appid: plus.runtime.appid,
					version: plus.runtime.version,
					// version: "0.0.9",
					imei: plus.device.imei,
					type: uni.getSystemInfoSync().platform == "android" ? 'android' : 'ios'
				}
				util.requestPost("api.php/home/checkVersion", data, function(res) {
					if(res.data.is_has_new){
						uni.hideTabBar();
						that.wgtUrl = res.data.updateUrl;
						that.updateRemark = res.data.remark;
						if(res.data.isMust == '1'){
							that.isMakeSure = true;
						}else{
							that.isMakeSure = false;
						}
						that.isUpdate = true;
					}
				});
			},
			subForm:function(e){// 下载更新
				if(uni.getSystemInfoSync().platform == 'ios'){
					uni.navigateTo({
						url: "../openUrl/openUrl?openUrl="+this.wgtUrl
					});
				}else{
					this.downloadover = "0%";
					this.downWgt();
				}
			},
			cancelUpdate: function(){// 取消更新
				this.isUpdate = false;
				uni.showTabBar();
			},
			// 下载wgt文件
			downWgt:function(){
				var that = this;
			    // plus.nativeUI.showWaiting("下载安装包...");
			    var task =plus.downloader.createDownload( that.wgtUrl, {filename:"_doc/update/"}, function(d,status){
					that.downloadover = false;
			        if ( status == 200 ) { 
						that.fileName = d.filename;
			            that.installWgt(); // 安装wgt包
			        } else {
			            plus.nativeUI.alert("下载更新失败！");
			        }
			        plus.nativeUI.closeWaiting();
			    });
				task.addEventListener("statechanged",that.onStateChanged,false);
				task.start();
			},
			
			// 更新应用资源  
			installWgt:function(){
				var that = this;
			    plus.nativeUI.showWaiting("安装更新文件...");
			    plus.runtime.install(that.fileName,{},function(){
			        // plus.nativeUI.closeWaiting();        
			        // plus.nativeUI.alert("应用资源更新完成！",function(){
			        //     plus.runtime.restart();
			        // });
			    },function(e){
			        plus.nativeUI.closeWaiting();        
			        plus.nativeUI.alert("安装更新文件失败["+e.code+"]："+e.message);
			    });
			},
			onStateChanged: function(download,status){
				var rate = '100%';
				if(download.state == 4 && status == 200){
					rate = "";
				}else{
					if(download.totalSize == 0){
						rate = '0%';
					}else{
						rate = (download.downloadedSize*100/download.totalSize).toFixed(1);
						rate = rate + '%';
					}
				}
				this.downloadover = rate;
			},
			goUrl (url, nav_title) {
				util.navigateToPage(url,nav_title,true)
			},
			goActivity (index) {
				let active = this.goods_active_list[index];
				uni.navigateTo({
					url: '/pagesB/index/activity?active_id='+active.id+'&title='+active.title
				});
			},
			// 公告跳转
			announcementEvent () {
				this.announcementShow = false
				if(this.pop_notice.out_link){
					var that = this;
					util.requestPost("api.php/home/articleDetail", {id:this.pop_notice.id,is_update_click:true}, function(res) {
					
					},false);
					uni.navigateTo({
						url:"/pages/openUrl/openUrl?openUrl="+this.pop_notice.out_link+"&title="+this.pop_notice.title
					});
				}else{
					uni.navigateTo({
						url: '/pagesB/index/announcementDetail?id='+this.pop_notice.id
					});
				}
			},
			scrollEvent (e) {
				if (!this.scrollWidth) {
					this.scrollWidth = e.detail.scrollWidth
				}
				this.scrollLeft = e.detail.scrollLeft;
				
			},
			numFilter (value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			}
		},
		computed: {
			// 每个tabs-item的宽度
			width() {
				return 686 / Number(this.col) + 'rpx';
			},
			// tab-bar中元素的宽度
			tabBarItemWidth() {
				return 98 / this.tabList.length;
			},
			tabBarItemLeft () {
				// 移动距离
				let distance = 0;
				if (this.scrollLeft) {
					let tab_count = this.tabList.length;
					let last_col_length = this.tabList[tab_count - 1].length;
					let last_col_count = last_col_length > this.col ? this.col : last_col_length;
					let total_cols = (tab_count - 1)*this.col+last_col_count;
					let left_rate = this.scrollLeft/this.scrollWidth;
					left_rate = left_rate*(((this.scrollWidth/total_cols)*this.col*this.tabList.length)/this.scrollWidth)*1.24;
					distance = 98 * left_rate;
				}
				// if (this.scrollLeft) {
				// 	let multiple = 343 / (this.scrollWidth / this.tabList.length);
				// 	distance = ((this.scrollLeft / 7) / this.tabList.length) * multiple;
				// }
				return distance
			}
		}
	}
</script>

<style scoped lang="scss">
.index {
	padding: 12rpx 32rpx;
	/*  #ifdef  H5  */
	padding-bottom: 60px;
	/*  #endif  */
}

.search-wrap {
	display: flex;
	align-items: center;
	margin: 0 20rpx;
	flex: 1;
}
.search-wrap image{
	width: 62rpx;
	height: 62rpx;
	padding:0 14rpx 0 24rpx;
}

.search {
	background-color: #f7f7f7;
	border-radius: 40rpx;
	padding: 16rpx 20rpx;
}
.search .u-icon {
	margin-right: 12rpx;
}
.search .text {
	color: #333;
	font-size: 24rpx;
	flex: 1;
	text-align: center;
}

.swiper {
	margin-top: 12rpx;
}

.tabsBox {
	position: relative;
	.tabs {
		padding: 32rpx 0;
		white-space: nowrap;
		.tabBox {
			max-width: 686rpx;
			display: inline-block;
			white-space: normal;
			vertical-align: top;
			font-size: 0rpx;
			-webkit-text-size-adjust:none;
			.item {
				display: inline-block;
				text-align: center;
				margin-bottom: 20rpx;
				.image {
					width: 98rpx;
					height: 98rpx;
				}
				.text {
					margin-top: 8rpx;
					font-size: 26rpx;
				}
			}
		}
	}
	.tab-bar {
		position: absolute;
		bottom: 16rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 98rpx;
		height: 8rpx;
		border-radius: 8rpx;
		background-color: #EEEEEE;
		.item {
			height: 8rpx;
			border-radius: 8rpx;
			background-color: var(--primaryColor);
		}
	}
}

.recommend {
	background-color: var(--bgColor);
	border-radius: 8rpx;
	overflow: hidden;
	position: relative;
	margin-bottom: 20rpx;
	.bgImg {
		width: 686rpx;
		height: 418rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.title {
		width: 686rpx;
		position: relative;
		z-index: 2;
		.image {
			width: 686rpx;
		}
	}
	.recommendList {
		width: 686rpx;
		padding: 0 14rpx 14rpx;
		white-space: nowrap;
		box-sizing: border-box;
		.item {
			display: inline-block;
			vertical-align: top;
			width: 208rpx;
			margin-right: 14rpx;
			&:last-of-type {
				margin-right: 0;
			}
			.imageBox {
				width: 208rpx;
				height: 208rpx;
				position: relative;
				overflow: hidden;
				border-radius: 12rpx;
				image {
					width: 208rpx;
					height: 208rpx;
					border-radius: 12rpx;
				}
				.maskBox {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					color: #FFFFFF;
					font-size: 22rpx;
					text-align: center;
					padding: 8rpx 0;
					background-color: rgba($color: #000000, $alpha: 0.5);
				}
			}
			.titleBox {
				font-size: 24rpx;
				margin: 8rpx 0;
				white-space: normal;
				height: 64rpx;
			}
			.price {
				color: var(--primaryColor);
				vertical-align: bottom;
				.original {
					color: #666;
					font-size: 20rpx;
					text-decoration: line-through;
					margin-left: 6rpx;
				}
			}
		}
	}
	
	.goodsList2 {
		padding-bottom: 14rpx;
		.item {
			padding: 0 20rpx;
			.info {
				padding: 26rpx 20rpx;
				height: 240rpx;
			}
		}
	}
	
	.waterfall {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 0 20rpx;
		.item {
			width: 313rpx;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			.imageBox {
				position: relative;
			}
			.info {
				font-size: 24rpx;
				color: #FFFFFF;
				position: relative;
				margin-top: -28rpx;
				.subsidy {
					background-color: #f55547;
					border-radius: 8rpx 12rpx 0 0;
					padding: 4rpx 12rpx;
				}
				.group {
					flex: 1;
					height: 52rpx;
					padding: 0 12rpx;
					background-color: #f96f64;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.text {
						display: inline-block;
						font-size: 20rpx;
						color: #FFFFFF;
					}
					.surplus {
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
			}
			.bottoBox {
				padding: 12rpx;
				.titleBox {
					color: #333333;
					font-size: 28rpx;
					font-weight: 600;
					height: 80rpx;
				}
				.priceBox {
					.price {
						display: inline-block;
						color: var(--primaryColor);
						font-size: 24rpx;
						margin-right: 20rpx;
						font-weight: 600;
						text {
							font-size: 32rpx;
						}
					}
					.original {
						display: inline-block;
						color: #666;
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
			}
		}
		// .ad {
		// 	height: 506rpx;
		// 	width: 313rpx;
		// 	border-radius: 12rpx;
		// 	overflow: hidden;
		// 	image {
		// 		height: 506rpx;
		// 		width: 313rpx;
		// 	}
		// }
	}
}

.goodsList .item {
	border-radius: 12rpx;
	overflow: hidden;
}
.goodsList .item .imageBox {
	position: relative;
	overflow: hidden;
	border-radius: 12rpx;
}
.goodsList .item .imageBox .mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.5);
}
.goodsList .item .imageBox .mask .image {
	width: 160rpx;
}

.goodsList .item .info {
	flex: 1;
	padding: 40rpx 20rpx;
	border-bottom: 1rpx solid #EEEEEE;
	height: 260rpx;
}
.goodsList .item .info .goodsInfoBox {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 100%;
}
.goodsList .item .info .title {
	color: #333333;
	font-size: 30rpx;
	font-weight: 600;
}
.goodsList .item .info .titleBox {
	color: #333333;
	font-size: 30rpx;
	font-weight: 600;
}
.goodsList .item .info .data {
	margin-top: 8rpx;
	position: relative;
}
.goodsList .item .info .data .flex {
	display: flex;
	align-items: flex-end;
}
.goodsList .item .info .data .flex .price {
	color: var(--primaryColor);
	font-size: 24rpx;
	margin-right: 20rpx;
	font-weight: 600;
}
.goodsList .item .info .data .flex .price text {
	font-size: 32rpx;
}
.goodsList .item .info .data .flex .original {
	color: #666;
	font-size: 24rpx;
	text-decoration: line-through;
}
.goodsList .item .info .data .ratio {
	color: #666;
	font-size: 24rpx;
	margin-top: 8rpx;
}
.goodsList .item .info .data .ratio text:first-of-type {
	margin-right: 28rpx;
}
.goodsList .item .info .data .bottoBox {
	margin-top: 8rpx;
}
.goodsList .item .info .data .bottoBox .group {
	display: inline-block;
	font-size: 20rpx;
	color: var(--primaryColor);
	// background-color: var(--primaryColor);
	border: 1rpx solid var(--primaryColor);
	border-radius: 8rpx;
	padding: 0 4rpx;
}
.goodsList .item .info .data .bottoBox .subsidy {
	display: inline-block;
	font-size: 22rpx;
	margin-left: 16rpx;
}
.goodsList .item .info .data .bottoBox .subsidy .line {
	color: #333333;
	font-weight: bold;
	// margin: 0 8rpx;
}
.goodsList .item .info .data .bottoBox .subsidy text{
	color: var(--primaryColor);
}
.goodsList .item .info .data .bottoBox .subsidy2 {
	display: inline-block;
	font-size: 22rpx;
}
.goodsList .item .info .data .bottoBox .subsidy2 text{
	font-size: 26rpx;
	color: var(--primaryColor);
}
.goodsList .item .info .data .btn {
	background: var(--btnBgColor);
	position: absolute;
	bottom: 0;
	right: 0;
	border-radius: 40rpx;
}
.goodsList .item .info .data .car {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 48rpx;
	height: 48rpx;
	border-radius: 40rpx;
	background: #ffe5e5;
}

/**APP更新**/

.popupBox {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
	}

	.shadeBg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99999;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

.progressBox{
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0,0,0,.5);
	.proInner{
	  font-size: 40rpx;
	  width: 170rpx;
	  height: 170rpx;
	  border-radius: 50%;
	  background-color: #eee;
	  text-align: center;
	  line-height: 170rpx;
	  position: absolute;
	  z-index: 1000;
	   top: 50%;
	   left: 50%;
	   transform: translate(-50%,-50%);
	}
}

.popCon{
	position: absolute;
	z-index: 100003;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 600rpx;
	background-color: #fff;
	border-radius: 16rpx;
	padding-bottom: 30rpx;
	font-size: 30rpx;
	.updateTip{
		width: 100%;
		height: 210rpx;
		margin-top: -24rpx;
		border-radius: 42rpx 42rpx 0 0;
	}
	.updateTit{
		position: absolute;
		z-index: 1;
		top: 50rpx;
		left: 90rpx;
		font-size: 48rpx;
		font-weight: 700;
		color: #fff;
		text-shadow: 0 1px 1px #000;
	}
	.updateCon{
		margin: 30rpx 0 30rpx 40rpx;
		width: 520rpx;
		max-height: 500rpx;
		box-sizing: border-box;
	
	}
	.btnBox{
		text-align: center;
		margin:  50rpx 40rpx 10rpx;
		.sub{
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			&:active{
				opacity: .82;
			}
		}
		.cancel{
			color:#999;
			background-color: #eee;
			margin-right:20rpx;
			
		}
		.confirm{
			color: #fff;
			background-color: #EC4338;
		}
	}
	.knowBtn{
		margin: 50rpx 40rpx 0;
		color: #fff;
		background-color: #EC4338;
		line-height: 80rpx;
		border-radius: 10rpx;
		text-align: center;
		&:active{
			opacity: .82;
		}
	}
}

.flex{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

.flex>.sub{
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	overflow: hidden;
}

.app {
	position: fixed;
	bottom: 240rpx;
	right: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.logo {
		border-radius: 16rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		width: 100rpx;
		height: 100rpx;
		padding: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
		.image {
			width: 80rpx;
			height: 80rpx;
		}
	}
	.text {
		margin-top: 8rpx;
		background-color: #e70012;
		font-size: 24rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
		padding: 2rpx 8rpx;
	}
}

.checkedInPopup {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 520rpx;
	text-align: center;
	padding: 94rpx 80rpx 52rpx;
	border-radius: 12rpx;
	background-color: var(--primaryColor);
	.image {
		width: 134rpx;
		height: 120rpx;
		position: absolute;
		top: -60rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.title {
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.reward {
		font-size: 28rpx;
		color: #ffcbc4;
		margin-top: 16rpx;
	}
	.btn {
		color: var(--primaryColor);
		background-color: #f8d168;
		border-radius: 52rpx;
		margin-top: 40rpx;
	}
}

.announcementShowPopup {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 585rpx;
	height: 678rpx;
	text-align: center;
	.image {
		width: 585rpx;
		height: 678rpx;
	}
	.content {
		position: absolute;
		top: 194rpx;
		left: 76rpx;
		right: 76rpx;
		.title {
			font-size: 30rpx;
		}
		.text {
			font-size: 28rpx;
			margin-top: 28rpx;
		}
	}
	.buttonBox {
		position: absolute;
		bottom: 36rpx;
		left: 0;
		right: 0;
		z-index: 10;
		text-align: center;
		.btn {
			height: 88rpx;
			width: 308rpx;
			color: #FFFFFF;
			background-color: var(--warningColor);
			font-size: 28rpx;
			font-weight: 600;
			line-height: 88rpx;
			border-radius: 88rpx;
		}
	}
}
</style>
